<template>
  <!-- 人员操作 -->
  <h-modal class="event-modal" v-model="show" :title="type == 'add' ? '添加':'编辑'" @submit="submit">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      size="large"
      :labelCol="{span: 8}"
      :wrapperCol="{span: 16}">
      <a-row :gutter="10">
        <a-col :span="12">
          <a-form-model-item label="姓名" prop="name">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.name"
              placeholder="请输入姓名"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="民族" prop="nation">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.nation"
              placeholder="请输入民族"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="24">
          <a-form-model-item label="照片" prop="image" :labelCol="{span: 4}">
            <UploadImageMutil ref="image" :url="url" @getUrl="getImg" />
          </a-form-model-item>

        </a-col>

        <a-col :span="12">
          <a-form-model-item label="出生日期" prop="birthday" >
            <a-date-picker
              size="large"
              :format="'YYYY-MM-DD'"
              valueFormat="YYYY-MM-DD"
              style="width: 100%"
              placeholder="选择出生日期"
              v-model="form.birthday"
            />
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="政治面貌" prop="politicsStatus">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.politicsStatus"
              placeholder="请输入政治面貌"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="性别" prop="gender">
            <a-select
              style="width: 100%"
              size="large"
              v-model="form.gender">
              <a-select-option :value="0">男</a-select-option>
              <a-select-option :value="1">女</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="最高学历" prop="highestEducation">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.highestEducation"
              placeholder="最高学历"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="专家定位" prop="orientation">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.orientation"
              placeholder="专家定位"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="毕业时间" prop="time">
            <a-date-picker
              size="large"
              :format="'YYYY-MM-DD'"
              valueFormat="YYYY-MM-DD"
              style="width: 100%"
              placeholder="选择毕业时间"
              v-model="form.time"
            />
          </a-form-model-item>
        </a-col>

        <!-- <a-col :span="12">
          <a-form-model-item label="学位" prop="highestEducation">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.highestEducation"
              placeholder="学位"></a-input>
          </a-form-model-item>
        </a-col> -->

        <a-col :span="12">
          <a-form-model-item label="毕业院校及专业" prop="graduatedFrom">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.graduatedFrom"
              placeholder="请输入毕业院校及专业"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="工作单位" prop="company">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.company"
              placeholder="请输入工作单位"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="单位性质" prop="natureBusiness">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.natureBusiness"
              placeholder="请输入单位性质"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="身份证号" prop="idNumber">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.idNumber"
              placeholder="请输入身份证号"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="职称" prop="title">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.title"
              placeholder="请输入职称"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="职务" prop="post">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.post"
              placeholder="请输入职务"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="聘任时间" prop="engageTime">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.engageTime"
              placeholder="请输入聘任时间"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="手机" prop="phone">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.phone"
              placeholder="请输入手机"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="区县市" prop="address">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.address"
              placeholder="请输入区县市"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="电子邮箱" prop="mail">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.mail"
              placeholder="请输入电子邮箱"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="通讯地址" prop="mailingAddress">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.mailingAddress"
              placeholder="请输入通讯地址"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="研究领域" prop="researchField">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.researchField"
              placeholder="请输入研究领域"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="类型" prop="type">
            <a-select v-model="form.type" size="large" placeholder="请输入">
              <a-select-option :value="0">网络专家</a-select-option>
              <a-select-option :value="1">司法专家</a-select-option>
              <a-select-option :value="2">行政专家</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="工作简历" prop="jobResume">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.jobResume"
              placeholder="请输入工作简历"></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="专业特长" prop="professionalExpertise">
            <a-input
              style="width: 100%"
              size="large"
              :maxLength="50"
              v-model="form.professionalExpertise"
              placeholder="请输入专业特长"></a-input>
          </a-form-model-item>
        </a-col>

      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
// eslint-disable-next-line
import { addEnforcement, editEnforcement } from '@/api/db';
import cloneDeep from 'lodash/cloneDeep';
import UploadImageMutil from '@/components/UploadImageMutil';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  components: {
    UploadImageMutil
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          // detailAccount().then(res => {
          //   this.form = res.data || {};
          //   this.$set(this.form, 'isLayered', !!this.form.isLayered);
          // });
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      url: '',
      moment,
      show: false,
      form: {},
      type: 'add',
      rules: {
        name: [{ required: true, message: '请输入' }],
        title: [{ required: true, message: '请输入' }],
        company: [{ required: true, message: '请输入' }],
        post: [{ required: true, message: '请输入' }]
      }
    };
  },
  methods: {
    add() {
      // const that = this;
      this.type = 'add';
      this.$nextTick(() => {
        this.form = {};
        this.$refs.ruleForm && this.$refs.ruleForm.resetFields();
      });
    },
    edit(form) {
      this.type = 'edit';
      this.form = { ...this.form, ...form };
      this.url = this.form.image;
    },
    submit() {
      this.$emit('submit', cloneDeep(this.form));
      this.show = false;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            addEnforcement(this.form).then(res => {
              this.$message.success('创建成功');
              this.show = false;
              this.$emit('submit', cloneDeep(this.form));
              this.form = cloneDeep({});
            });
          } else if (this.type == 'edit') {
            editEnforcement(this.form).then(res => {
              this.$message.success('编辑成功');
              this.show = false;
              this.$emit('submit', cloneDeep(this.form));
              this.form = cloneDeep({});
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getImg(img) {
      this.$set(this.form, 'image', img);
    }
  }
};
</script>

<style>

</style>
